<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .btn {
            border: 0;

            padding: 6px 12px;
            border-radius: 5px;

        }

        .btn:hover {
            cursor: pointer;
        }

        .btn.btn-default {
            background-color: #f1f1f1;
            color: #666;
        }

        .btn.btn-primary {
            background-color: rgb(33, 185, 190);
            color: #fff;
        }

        .btn.btn-success {
            background-color: rgb(8, 207, 75);
            color: #fff;
        }

        .btn.btn-danger {
            background-color: rgb(221, 96, 38);
            color: #fff;
        }

        .btn.btn-warning {
            background-color: rgb(236, 208, 44);
            color: #fff;
        }

        /* .btn.btn-circle{
            border-radius: 50%;
            padding: 6px;
        } */
    </style>
</head>

<body>
    <div id="app">
        <!-- <button class="btn btn-primary">按钮</button>
        <button class="btn btn-success">按钮</button>
        <button class="btn btn-danger">按钮</button>
        <button class="btn btn-warning">按钮</button>
        <button class="btn btn-default">按钮</button> -->
        <hr>
        <!-- 使用自定义注册的按钮组件 -->
        <btn></btn>
        <btn type=success></btn>
        <hr>
        <!-- 1.直接在组件中通过属性方式实现组件的静态传参（参数字符串） -->
        <btn type="primary"></btn>
        <btn type="success"></btn>
        <btn type="danger"></btn>
        <btn type="warning"></btn>
        <!-- 2.通过v-bind方式来实现动态传参（参数就是父组件中的变量数据） -->
        <btn :type="t"></btn>

    </div>

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        /**
        <btn typr="primary"></btn>
           封装一个按钮组件
             要求：
             1）要实现多套风格样式=》type['primary','success','danger','warning','default']
             2)内容自定义
             3）实现圆形 ，带图标，尺寸，mini small medium
        */
        Vue.component('btn', {
            // props: ['type'],
            props: {
                // type:String,//限定type属性只能传递一个字符串参数
                // type:[String,Number],//接受多种数据类型的数据：String,Number,Array,Boolean,Date,Function,SymbolObject,Promise
                type: {//针对于组件传递的type属性，进行约定
                    type: [String, Number],//约定当前组件传递的属性的类型
                    required: false,//必须传递参数
                    default: "default",
                    validator: function (value) {//自定义校验
                        const allowTypes = ['primary', 'success', 'danger', 'warning', 'default'];
                        if (allowTypes.indexOf(value) == -1) {
                            throw new TypeError("Your type parameter does not meet the requirements, please refer to:["+ allowTypes+']') ;
                        }
                        return allowTypes.indexOf(value) !== -1;//只要返回布尔值 true正确 false就是有问题

                    }
                }
            },

            template: `<button :class="['btn' , 'btn-'+type]">按钮</button>`

        })

        //vm 就是根组件
        let vm = new Vue({
            el: "#app",//指定Vue挂载的DOM
            data: {//当前vue实例中使用的数据
                t: "success"
                // t: 123456

            },
            methods: {//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>

</html>